(function(){
    let Message = Vue.extend({
        template: "<div ref='msg' class='message-box' @mouseover='closeTimer()' @mouseout='openTimer()'>{{ msg }}</div>",
        data() {
            return {
                msg:"默认值",
                time:3000,
                timer: null
            }
        },
        methods: {
            closeTimer() {
                if (this.timer != null) {
                    this.$refs.msg.style.animation = "";
                    this.$refs.msg.style.transform = "translate(-50%, 100%)";
                    clearTimeout(this.timer);
                }
            },
            openTimer() {
                this.$refs.msg.style.animation = 'fadeOut 1000ms ease';
                this.$refs.msg.style.transform = "translate(-50%, -110%)";
                setTimeout(() => {
                    this.$destroy();
                }, 1000)
            }
        },
        mounted() {
            // this.$el
            document.body.appendChild(this.$el);
            this.$refs.msg.style.animation = `showTip ${this.time}ms ease`;
            this.timer = setTimeout(() => {
                this.$destroy();
            }, this.time + 100)
        },
        beforeDestroy() {
            document.body.removeChild(this.$el);
        },
    });
    function message(msg,time) {
        let data = {};
        if(msg){
            data.msg = msg;
        }
        if(time){
            data.time = time;
        }
        new Message({
            data:data
        }).$mount();
    }

    window.showMessage = message;
    Vue.prototype.$showMessage = message;
})()
